<template>
    <div class="box">
        <header>
                 <!-- 头部 -->
                <TopNavView :onShow="onShow"></TopNavView>
                <!-- 导航栏 -->
                <HeaderView :list="list"></HeaderView>
               <div class="breadcrumb">
                     <p>
                        <router-link to="/home/homepage">首页</router-link>
                        <i class="el-icon-arrow-right"></i>
                        <router-link to="/home/category1/1005000">美食</router-link>
                     </p>
                </div>
            <div class="bannerView">
                <!-- 轮播图 -->
                <carousel-views :bannerList="bannerList"></carousel-views>
        </div>
</header>
        <div class="sub_list">
            <h3>全部分类</h3>
            <ul class="sub_ul" >
                <a class="sub_a" v-for="item in sub" :key="item.id">
                    <li class="sub_li"><img :src="item.picture" class="sub_img"></li>
                    <li class="sub_li1">{{item.name}}</li>
                </a>
            </ul>
        </div>

        <div class="ref_goods" v-for="items in list" :key="items.id">
            <div class="ref_header" >
                <h3>{{items.name}}</h3>
                <p>温暖柔软，品质之选</p>
                <div class="ref_body" >
                <a class="ref_a">
                     <div class="ref_btm">
                        <img :src="items.goods[0].picture" class="ref_img1">
                        <p class="ref_p">{{items.goods[0].name}}</p>
                    <p class="ref_p1">{{items.goods[0].desc}}</p>
                    <p class="ref_p2">{{items.goods[0].price}}</p>
                     </div>
                </a>
                <a class="ref_a">
                     <div class="ref_btm">
                        <img :src="items.goods[1].picture" class="ref_img1">
                        <p class="ref_p">{{items.goods[1].name}}</p>
                    <p class="ref_p1">{{items.goods[1].desc}}</p>
                    <p class="ref_p2">{{items.goods[1].price}}</p>
                     </div>
                </a>
                <a class="ref_a">
                     <div class="ref_btm">
                        <img :src="items.goods[2].picture" class="ref_img1">
                        <p class="ref_p">{{items.goods[2].name}}</p>
                    <p class="ref_p1">{{items.goods[2].desc}}</p>
                    <p class="ref_p2">{{items.goods[2].price}}</p>
                     </div>
                </a>
                 <a class="ref_a">
                     <div class="ref_btm">
                        <img :src="items.goods[3].picture" class="ref_img1">
                        <p class="ref_p">{{items.goods[3].name}}</p>
                    <p class="ref_p1">{{items.goods[3].desc}}</p>
                    <p class="ref_p2">{{items.goods[3].price}}</p>
                     </div>
                </a>
                 <a class="ref_a">
                     <div class="ref_btm">
                        <img :src="items.goods[4].picture" class="ref_img1">
                        <p class="ref_p">{{items.goods[4].name}}</p>
                    <p class="ref_p1">{{items.goods[4].desc}}</p>
                    <p class="ref_p2">{{items.goods[4].price}}</p>
                     </div>
                </a>
            </div>
            </div>
            
        </div>
    </div>
</template>
<script>
import TopNavView from "@/components/TopNavView.vue";
import HeaderView from "@/components/HeaderView.vue";
import CarouselViews from "@/components/CarouselViews.vue";
export default {
    components: { TopNavView, HeaderView,CarouselViews},
    data(){
        return{
            list:{},
            sub:{},
            onShow: false,
            list: [],//分类商品列表信息
            bannerList: [],   
        }
    },
   async mounted(){
    let res = await this.$http.CategoryOneViewslist({id:1005002})
    this.list=res.data.result.children;
    console.log(this.list);

    let sub=await this.$http.category()
    this.sub=sub.data.result[1].children
    // console.log(sub.data.result[0].children);
   },
   
   methods: {
    // 导航栏数据
    async getCategory() {
      const res = await this.$http.category();
      this.list = res.data.result;
      if (this.$store.getters.getToken) {
        this.onShow = true;
      } else {
        this.onShow = false;
      }
    },
    // banner数据
    async getBanner() {
      const res = await this.$http.banner();
      this.bannerList = res.data.result;
    },
  },
   async created() {
    this.getCategory();
    this.getBanner();
    // let res = await this.$http.CategoryOneViewslist({id:1005002})
    // this.listArr=res.data.result.children;
    // console.log(this.listArr);
  },
}
</script>

<style lang="scss" scoped>
.box{
    background: #f5f5f5;
}
header {
  height: 53px;
  background: #333;
  padding: 0 140px;
  .bannerView {
    position: relative;
  }
  .slotname {
    display: flex;
    align-items: center;
  }
}
.breadcrumb{
    width:100%;
    height:50px;
    // background: rgb(207, 210, 210);
}
.box_header{
    width:1240px;
    height:132px;
    background: darkcyan;
}
.sub_list{
    width:1240px;
    height:260px;
    background: white;
    margin:0 auto;
    margin-top:705px;
        
    h3{
        font-size: 28px;
        color: rgb(102, 102, 102);
        font-weight: 400;
        text-align: center;
        line-height: 100px;
    }
    .sub_ul{
        width:1240px;
        height:160px;
        background: white;
        display: flex;
    }
    .sub_a{
        width: 168px;
        height: 140px;
        // background:wheat;
        margin-left: 15px;
        float: left;
       
    }
    .sub_img{
         width: 100px;
        height: 100px;
         padding: 0px 35px;
    }
    .sub_li1{
        text-align: center;
    }
}
.ref_goods{
        width:1240px;
        height:457px;
        background: white;
        margin:0 auto;
        margin-top:15px;
        .ref_header{
             width:1240px;
            height:128px;
            // background: wheat;
        }
        h3{
            font-size: 28px;
            color: rgb(102, 102, 102);
            font-weight: 400;
            text-align: center;
            line-height: 100px;
        }
        p{
            text-align: center;
            color: rgb(153, 153, 153);
            font-size: 20px;
            position: relative;
            top: -20px;
        }
        .ref_body{
            width:1240px;
            height:330px;
            // background:pink;
            .ref_a{
            width:220px;
            height:300px;
            background:white;
            display: block;
            float: left;
            margin-left:20px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            transition: all .5s;
        }
        .ref_btm{
            width:160px;
            height:300px;
            // background: rgb(175, 170, 171);
            margin-left: 25px;
        }
        .ref_img1{
            width:160px;
            height:160px;
            padding: 10px 0px;
        }
        .ref_p{
            font-size: 16px;
            color:black;
            padding: 10px 0px;
            overflow: hidden;
        }
        .ref_p1{
            font-size: 16px;
            overflow: hidden;
        }
        .ref_p2{
            color: #cf4444;
            font-size: 20px;
            margin-top:10px;
        }
        }
        
    }
</style>